<template lang="">
  <el-card class="box-card">
    <el-form :model="addarticle" :rules="addarticlerules" ref="addarticleref" label-width="100px" class="demo-ruleForm"
      style="width: 60%;margin-top: 10px;">
      <el-form-item label="文章标题" prop="name">
        <el-input v-model="addarticle.name" clearable></el-input>
      </el-form-item>
      <el-form-item label="文章图片">
        <el-upload class="upload-demo" drag action="#" :auto-upload="false" :limit="1" ref="upload"
          :http-request="upload" multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
      </el-form-item>
      </el-form-item>
      <el-form-item label="文章分类">
        <el-cascader v-model="value" expand-trigger='hover' :options="options" @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label='编译文章'>
        <mavon-editor v-model="content" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="upload">添加</el-button>
      </el-form-item>
    </el-form>

  </el-card>

</template>
<script>
    export default {
        data() {
            return {
                //添加商品表单数据
                addarticle: {
                    name: '',

                },
                //验证
                addarticlerules: {
                    name: [{
                        required: true,
                        message: '请输入文章标题',
                        trigger: 'blur'
                    }],
                },

                //下拉
                options: [{
                    value: '前端',
                    label: '前端',
                    children: [{
                        value: 'less',
                        label: 'less',
                    }, {
                        value: 'html',
                        label: 'html',
                    }, {
                        value: 'javasrcipt',
                        label: 'javasrcipt',
                    }, {
                        value: 'vue',
                        label: 'vue',
                    }, {
                        value: 'react',
                        label: 'react',
                    }, {
                        value: 'es6',
                        label: 'es6',
                    }, {
                        value: 'es5',
                        label: 'es5',
                    }, {
                        value: 'webpack',
                        label: 'webpack',
                    }, {
                        value: 'axios',
                        label: 'axios',
                    }, {
                        value: 'uniapp',
                        label: 'uniapp',
                    }]
                }, {
                    value: '后端',
                    label: '后端',
                    children: [{
                        value: 'node',
                        label: 'node',
                    }, {
                        value: '云开发',
                        label: '云开发',
                    }, {
                        value: 'PHP',
                        label: 'PHP',
                    }, {
                        value: 'JAVA',
                        label: 'JAVA',
                    }, {
                        value: 'VB',
                        label: 'VB',
                    }, {
                        value: 'GO',
                        label: 'GO',
                    }, {
                        value: 'Python',
                        label: 'Python',
                    }, {
                        value: 'C',
                        label: 'C',
                    }, {
                        value: 'C#',
                        label: 'C#',
                    }]
                }, {
                    value: 'sql',
                    label: 'sql',
                    children: [{
                        value: 'mysql',
                        label: 'mysql',
                    }, {
                        value: 'redis',
                        label: 'redis',
                    }]
                }],

                value: [],
                content: ''

            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },

            //提交
            upload() {
                this.$refs.addarticleref.validate(valid => {
                    if (valid) {
                        const formData = new FormData();
                        let file = this.$refs.upload.uploadFiles[0];
                        let {
                            name
                        } = this.addarticle
                        if (!file) { // 若未选择文件
                            this.$message.error("选择文章图片");
                            return;
                        }
                        if (this.value == '') {
                            this.$message.error("选择文章分类");
                            return;
                        }
                        if (this.content == '') {
                            this.$message.error("输入文章内容");
                            return;
                        }
                        formData.append('file', file.raw);
                        formData.append('name', name);
                        formData.append('classed', this.value);
                        formData.append('content', this.content)
                        this.$axios({
                            url: '/addarticle',
                            method: 'post',
                            data: formData,
                        }).then(res => {
                            if (res.data == 'ok') {
                                this.$message({
                                    type: 'success',
                                    message: '添加成功!'
                                });
                                this.$refs.addarticleref.resetFields()
                                this.value = '';
                                this.$refs.upload.clearFiles()
                                this.content = ''
                            }
                        })
                    } else {
                        this.$message.error("表单校验失败，请检查");
                        return false;
                    }
                })
            }
        },

    }
</script>
<style lang="less">

</style>